import React, { Component } from 'react'
import { Button, StyleSheet, TextInput, View } from 'react-native'
import { inject, observer } from 'mobx-react/native'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

import { IconButton } from '../components'
import { variables } from '../styles'

@inject('actions', 'store')
@observer
@graphql(
  gql`
    mutation($content: String!, $fromId: ID!) {
      createEvent(content: $content, fromId: $fromId) {
        id
      }
    }
  `,
  { name: 'create' },
)
export class EventScreen extends Component {
  state = { content: '' }

  onChangeText = content => this.setState({ content })

  onSubmit = async () => {
    const { navigation, store, create } = this.props
    const content = this.state.content.trim()

    if (!content) return

    const response = await create({
      variables: {
        content,
        fromId: store.user.id,
      },
    })

    navigation.pop()
  }

  render = () => (
    <View style={styles.container}>
      <View style={styles.input}>
        <TextInput
          style={{ flexGrow: 1, padding: 12 }}
          autoFocus={true}
          multiline={true}
          // maxHeight={10}
          // numberOfLines={5}
          value={this.state.content}
          onChangeText={this.onChangeText}
          placeholder="Input content here"
          clearButtonMode="always"
        />
      </View>
      <View style={styles.button}>
        <Button title="Submit" onPress={this.onSubmit} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  input: {
    margin: 12,
    height: 360,
    backgroundColor: 'white',
    borderWidth: variables.border_width_sm,
    borderColor: variables.border_color_base,
  },
  button: {
    marginHorizontal: 12,
    backgroundColor: 'white',
  },
})
